import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Map, Mountain, Droplets, Bike, Tent } from 'lucide-react';
export function Activities() {
  const activities = [{
    id: 'hiking',
    title: 'Trail & Trek',
    description: 'Explore gear for hiking, trekking, and trail running across all terrains and conditions.',
    icon: <Map size={24} />,
    color: 'outdoor-orange',
    image: 'https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    path: '/activities/hiking',
    featuredGear: [{
      name: 'Hiking Boots',
      count: 24
    }, {
      name: 'Backpacks',
      count: 18
    }, {
      name: 'Trekking Poles',
      count: 12
    }, {
      name: 'GPS Devices',
      count: 9
    }]
  }, {
    id: 'climbing',
    title: 'On The Rock',
    description: 'Essential gear for rock climbing, bouldering, and mountaineering expeditions.',
    icon: <Mountain size={24} />,
    color: 'climbing-red',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    path: '/activities/climbing',
    featuredGear: [{
      name: 'Climbing Harnesses',
      count: 15
    }, {
      name: 'Ropes',
      count: 10
    }, {
      name: 'Climbing Shoes',
      count: 22
    }, {
      name: 'Carabiners',
      count: 30
    }]
  }, {
    id: 'water',
    title: 'On The Water',
    description: 'Equipment for kayaking, paddleboarding, rafting, and other water adventures.',
    icon: <Droplets size={24} />,
    color: 'lake-blue',
    image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    path: '/activities/water',
    featuredGear: [{
      name: 'Kayaks',
      count: 12
    }, {
      name: 'Paddleboards',
      count: 8
    }, {
      name: 'Dry Bags',
      count: 15
    }, {
      name: 'PFDs',
      count: 10
    }]
  }, {
    id: 'cycling',
    title: 'On Two Wheels',
    description: 'Gear for mountain biking, bikepacking, road cycling, and gravel adventures.',
    icon: <Bike size={24} />,
    color: 'outdoor-orange',
    image: 'https://images.unsplash.com/photo-1541625602330-2277a4c46182?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    path: '/activities/cycling',
    featuredGear: [{
      name: 'Mountain Bikes',
      count: 18
    }, {
      name: 'Bike Packs',
      count: 14
    }, {
      name: 'Helmets',
      count: 20
    }, {
      name: 'Bike Repair',
      count: 25
    }]
  }, {
    id: 'camping',
    title: 'Camp & Survive',
    description: 'Shelters, cooking equipment, and survival tools for all your overnight adventures.',
    icon: <Tent size={24} />,
    color: 'forest-green',
    image: 'https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    path: '/activities/camping',
    featuredGear: [{
      name: 'Tents',
      count: 22
    }, {
      name: 'Sleeping Bags',
      count: 28
    }, {
      name: 'Stoves',
      count: 15
    }, {
      name: 'Knives & Tools',
      count: 32
    }]
  }];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-24 bg-carbon-black">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Mountain range" className="w-full h-full object-cover opacity-30" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="font-display text-4xl md:text-6xl mb-4">
              CHOOSE YOUR ADVENTURE
            </h1>
            <p className="text-xl text-gray-300 mb-8">
              Explore our gear collections organized by activity. From alpine
              peaks to river valleys, find the equipment that's been tested in
              the environments where you play.
            </p>
          </div>
        </div>
      </section>
      {/* Activities Grid */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {activities.map(activity => <div key={activity.id} className="bg-carbon-black rounded-lg overflow-hidden">
                <div className="md:flex">
                  {/* Activity Image */}
                  <div className="md:w-2/5 relative">
                    <img src={activity.image} alt={activity.title} className="w-full h-64 md:h-full object-cover" />
                    <div className={`absolute top-0 left-0 bg-${activity.color} p-3 rounded-br-lg`}>
                      {activity.icon}
                    </div>
                  </div>
                  {/* Activity Content */}
                  <div className="p-6 md:w-3/5">
                    <h2 className="font-display text-3xl mb-3">
                      {activity.title}
                    </h2>
                    <p className="text-gray-300 mb-6">{activity.description}</p>
                    <div className="mb-6">
                      <h3 className="font-display text-lg mb-3">
                        FEATURED GEAR CATEGORIES:
                      </h3>
                      <div className="grid grid-cols-2 gap-2">
                        {activity.featuredGear.map((gear, index) => <div key={index} className="flex items-center justify-between">
                            <span>{gear.name}</span>
                            <span className={`text-${activity.color} text-sm`}>
                              ({gear.count})
                            </span>
                          </div>)}
                      </div>
                    </div>
                    <Link to={activity.path} className={`inline-flex items-center bg-${activity.color} hover:opacity-90 text-white font-display px-6 py-3 rounded transition-colors`}>
                      EXPLORE {activity.title.toUpperCase()}
                      <ArrowRight size={16} className="ml-2" />
                    </Link>
                  </div>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Featured Adventure */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            FEATURED ADVENTURE
          </h2>
          <div className="relative h-[500px] rounded-lg overflow-hidden">
            <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Alpine Adventure" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
            <div className="absolute bottom-0 left-0 p-8 max-w-2xl">
              <span className="inline-block bg-climbing-red px-4 py-1 font-display mb-4">
                ALPINE EXPEDITION
              </span>
              <h3 className="font-display text-4xl text-white mb-4">
                MONT BLANC TRAVERSE: THE ULTIMATE GEAR TEST
              </h3>
              <p className="text-sand-light mb-6">
                Our team spent 7 days crossing the Mont Blanc massif, putting
                alpine gear through the ultimate test of endurance, weather
                resistance, and functionality at altitude.
              </p>
              <Link to="/expedition/mont-blanc" className="inline-flex items-center bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
                READ THE EXPEDITION REPORT
                <ArrowRight size={16} className="ml-2" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>;
}